var templatename = $('#templatename').html(); //
var apppageid = $('#apppageid').html();       // 模板id
var apprecname = $('#apprecname').html();     // 模板
var pagetplname = $('#pagetplname').html();   // 模板

var column_area_recommend = []; //区域推荐数据
var recommend_data_type = 0;
var rectpl_id = apppageid; //模板id
var area = `x0y0`; //推荐区域
var pagetpl_name = pagetplname || 'XLSZSYMB';
var apprec_name = apprecname || 'XLSZSYTJWXT';
// XLSZSYTJWSY XLSZSYTJWXT XLSZSYTJWZJWZ XLSZSYTJWTSYLS 
// var index_nav_show = 0; //控制首页内容模板显示
var API_URL = 'http://cms.yjuji.com/'
// n0区域栏目推荐位数据
function getColumnsN0() {
    $.ajax({
        url: `/api/ott/1/2/paneltpl/${pagetpl_name}/${apprec_name}`, 
        dataType: 'json',
        async: false,
        success: function(data) {
            if (data.status == 200) {
                for (var ele in data.data) {
                    switch (ele) {
                        case 'x0y0':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    console.log(_data, i);
                                    _htmlcon += '<div><img src="' + _data[i].img + '" alt=""></div>';
                                    return _htmlcon;
                                },
                            });
                            // 图片轮播配置参数 
                            swiperWidget("x0y0", {
                                speed: 3,
                                is_loop: 1,
                                start_index: 0,
                                direction: 0,
                                indicator: 1,
                                auto: true
                            });
                            break;
                        case 'x0y1':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    var _left_value = 218 * i;
                                    _htmlcon += '<div class="n0_content_left_bot_box" id="n0_x0y1__' + i + '" style="left:' + _left_value + 'px;">';
                                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        case 'x1y0':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    var _left_value = 184 * i;
                                    _htmlcon += '<div class="n0_content_center_top_box" id="n0_x1y0__' + i + '"  style="left:' + _left_value + 'px;">';
                                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        case 'x1y1':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    var _top_value = 46 * i;
                                    var _num = i + 1;
                                    _htmlcon += '<div class="n0_content_center_bot_box" id="n0_x1y1__' + i + '" style="top: ' + _top_value + 'px;">';
                                    _htmlcon += '<div class="n0_center_box_list_num">' + _num + '、</div>';
                                    if(i < 9) {
                                        _htmlcon += '<div class="n0_center_box_list_text">' + _data[i].name + '</div>';
                                    } else {
                                        _htmlcon += '<div class="n0_center_box_list_text" style="left: 35px;">' + _data[i].name + '</div>';
                                    }
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        case 'x2':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    var _top_value = 198 * i;
                                    _htmlcon += '<div class="n0_content_right_box" id="n0_x2__' + i + '" style="top: ' + _top_value + 'px;">';
                                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        default:
                            break;
                    }
                }
                addClickActive(data.data);
            } else {
                layer.msg(data.data, { time: 2000, icon: 2 });
            }
        },
        error: function(XMLHttp, textStatus, errorThrown) {
            layer.msg(`请求 ${XMLHttp} 状态 ${textStatus} 异常 ${errorThrown}`, { time: 2000, icon: 2 });
        }
    });
}

function getColumnsFn(obj) {
    var defaults = {
        data: obj.data,
        ele: obj.ele,
        loopFn: obj.loopFn,
    }
    var _data = defaults.data;
    var len = _data.length;
    var _htmlcon = '';
    for (var i = 0; i < len; i++) {
        _htmlcon += defaults.loopFn(i, _data);
    }
    console.log(defaults.ele);
    // $('#indicator').empty();
    document.getElementById(defaults.ele).innerHTML = _htmlcon;
}

// 数据回填
function create(data, area) {
    switch (area) {
        case 'x0y0':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    console.log(_data, i);
                    _htmlcon += '<div><img src="' + _data[i].img + '" alt=""></div>';
                    return _htmlcon;
                },
            });
            // 图片轮播配置参数 
            $('#indicator').empty();
            swiperWidget("x0y0", {
                speed: 3,
                is_loop: 1,
                start_index: 0,
                direction: 0,
                indicator: 1,
                auto: true
            });
            break;
        case 'x0y1':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    var _left_value = 218 * i;
                    _htmlcon += '<div class="n0_content_left_bot_box" id="n0_x0y1__' + i + '" style="left:' + _left_value + 'px;">';
                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        case 'x1y0':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    var _left_value = 184 * i;
                    _htmlcon += '<div class="n0_content_center_top_box" id="n0_x1y0__' + i + '"  style="left:' + _left_value + 'px;">';
                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        case 'x1y1':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    var _top_value = 46 * i;
                    var _num = i + 1;
                    _htmlcon += '<div class="n0_content_center_bot_box" id="n0_x1y1__' + i + '" style="top: ' + _top_value + 'px;">';
                    _htmlcon += '<div class="n0_center_box_list_num">' + _num + '、</div>';
                    if(i < 9) {
                        _htmlcon += '<div class="n0_center_box_list_text">' + _data[i].name + '</div>';
                    } else {
                        _htmlcon += '<div class="n0_center_box_list_text" style="left: 35px;">' + _data[i].name + '</div>';
                    }
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        case 'x2':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    var _top_value = 198 * i;
                    _htmlcon += '<div class="n0_content_right_box" id="n0_x2__' + i + '" style="top: ' + _top_value + 'px;">';
                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        default:
            break;
    }
}

//使用col插件实现表格头宽度拖拽
$("#media_assets .table").colResizable();

$('#table_livebox').show();

// $(`#${apprec_name}`).show();

getDataType(getMediaAsset, renderDataType, getColumnAreaRecommend);

getColumnsN0();
$("#n0_content_left_top_box__0").addClass('pitchOn');
$('#area_name').html(area);
$('#top_title').html(apprec_name);